<template>
 <div style="margin:0 auto;width: 1000px; height:570px ">
   <search-bar @onSearch="searchResult" ref="searchBar" style="margin-top:20px"></search-bar>
   <div class="title">
        资源慢慢日积月累，需要什么可以在群里@我，如果我有就放到这里！
  </div>
  <div style="margin-top:10px;">
     <el-table
    :data="resources"
    stripe
    style="width: 100%">
    <el-table-column
      prop="dname"
      label="捐献人"
      width="180">
    </el-table-column>
    <el-table-column
      prop="dcode"
      label="提取码"
      width="180">
    </el-table-column>
    <el-table-column
      prop="ddesc"
      label="提取地址">
    </el-table-column>
  </el-table>
  </div>
  <div style="text-align:center;padding:10px;">
                  <el-pagination
                background
                layout="total, prev, pager, next, jumper"
                @current-change="handleCurrentChange"
                :page-size="pageSize"
                :total="total">`
                </el-pagination>
  </div>
 </div>
</template>

<script>
import SearchBar from '../common/SearchBar'
 export default {
   name: 'ResourceIndex',
   data () {
     return {
        resources: [],
        pageSize: 8,
        total: 0,
        keywords: '',
                }
   },
   props: [],
   components: {SearchBar},
   created () {},
   mounted () {
     this.loadResources();
   },
   methods: {
     searchResult () {
        var _this = this
        this.keywords = this.$refs.searchBar.keywords
        this.$axios
          .get('/resource/' + this.pageSize + '/1' +'/' + this.$refs.searchBar.keywords, {
          }).then(resp => {
          if (resp && resp.data.code === 200) {
             _this.resources = resp.data.data.records
             _this.total = resp.data.data.total
          }
        })
      },
      loadResources () {
                var _this = this
                this.$axios.get('/resource/' + this.pageSize + '/1').then(resp => {
                  if (resp && resp.data.code === 200) {
                    _this.resources = resp.data.data.records
                    _this.total = resp.data.data.total
                  }
                })
              },
              handleCurrentChange (page) {
                var _this = this
                this.$axios.get('/resource/' + this.pageSize + '/' + page +'/' +this.keywords).then(resp => {
                  if (resp && resp.data.code === 200) {
                    _this.resources = resp.data.data.records
                    _this.total = resp.data.data.total
                  }
                })
              }
   }
 }
</script>

<style lang="css" scoped>
   .title{
     background-color: aqua;
     margin-top:-10px;
     height: 40px;
     padding: 10px;
     text-align: left;
   }
</style>
